<template>
  <div class="idx">
    <Bs class="wrapper" :data="[]" :pullup="true" @scrollToEnd="loadData">
       <div class="content">
        <van-swipe :autoplay="3000" indicator-color="white" class="swiper">
          <van-swipe-item class="swiper_item" v-for="item in swiperList" :key="item.name">
            <img :src="item.img" style="width:100%;height:100%" alt />
          </van-swipe-item>
        </van-swipe>

        <div class="border_dash">
          <div class="class_box">
            <div
              class="class_item"
              v-for="(item,index) in navList"
              :key="index"
              @click="navTo('/good_list',item)"
            >
              <img :src="item.img" class="class_icon" alt />
              <span style="font-size:.26rem;color:#565656;">{{item.name}}</span>
            </div>
          </div>
        </div>

        <div class="devide"></div>

        <div class="hot_sale col">
          <div class="hot_title">
            <span>热卖</span>
            <span class="more">more</span>
          </div>

          <van-row class="hot_box">
            <van-col style="height:100%;background:#ccc;" span="11"></van-col>
            <van-col span="13" style="height:100%;">
              <van-row span="12" style="height:50%;background:#ddd"></van-row>
              <van-row span="12" style="height:50%;"></van-row>
            </van-col>
          </van-row>
        </div>

        <div class="devide"></div>

        <div class="hot_sale col">
          <div class="hot_title">
            <span>推荐</span>
          </div>
        </div>
        <WaterFall :list="list" />
        <!-- <div class="loading-wrapper"></div> -->

        <div style="height:1rem;"></div>
      </div>
    </Bs>
  </div>
</template>

<script>
import WaterFall from "@/components/Public/WaterFall";
import Bscroll from "better-scroll";
import { mixins } from "@/utils/mixins";
import Bs from "@/components/Bs.vue";
export default {
  mixins: [mixins],
  data() {
    return {
      list:[],
      navList: [
        { name: "手机", img: require("@/assets/icon/1.png") },
        { name: "家电", img: require("@/assets/icon/2.png") },
        { name: "服装", img: require("@/assets/icon/3.png") },
        { name: "其他", img: require("@/assets/icon/4.png") }
      ],
      swiperList: [
        { name: "手机", img: require("@/assets/icon/s1.jpg") },
        { name: "家电", img: require("@/assets/icon/s2.jpg") },
        { name: "其他", img: require("@/assets/icon/s3.jpg") }
      ]
    };
  },
  components: {
    WaterFall,
    Bs
  },
  mounted() {
    this.getPage();
  
  },
  methods: {
    loadData(){
      console.log('触底了')
    },
    async getPage() {
      const res = await this.$api.goodsApi.goodClass();
      const list = res.data.data.map(item => ({
        name: item.name,
        img: require("@/assets/icon/1.png"),
        id: item.id
      }));
      this.navList = list;
    }
  }
};
</script>

<style lang="less" scoped>
.idx {
  padding-bottom: 1rem;
}
.swiper {
  width: 100%;
  height: 3.8rem;
  .swiper_item {
    background-color: #eee;
  }
}
.border_dash {
  padding: 0.1rem;
}
.class_box {
  border: 1px dashed #3963bc;
  box-sizing: border-box;

  display: flex;
  width: 100%;
  flex-wrap: wrap;
  padding-bottom: 0.3rem;
  .class_item {
    margin-top: 0.3rem;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .class_icon {
      width: 0.88rem;
      height: 0.88rem;
      // background-color: #eee;
    }
  }
}

.hot_sale {
  width: 100%;
  padding: 0.2rem;
  .hot_title {
    padding-bottom: 0.06rem;
    border-bottom: 0.01rem #3963bc dashed;
    font-size: 0.28rem;
    letter-spacing: 0.1rem;
    padding-left: 0.02rem;

    display: flex;
    align-items: baseline;
    justify-content: space-between;
    .more {
      font-size: 0.24rem;
      letter-spacing: 0.02rem;
      color: #3963bc;
    }
  }
}
.wrapper {
  position: fixed;
  left: 0;
  top: 0;

  height: 100%;
  width: 100%;
  overflow: hidden;
  li {
    height: 1.6rem;
    width: 100%;
    background-color: #3963bc;
    margin-bottom: 0.2rem;
  }
}
.hot_box {
  height: 4rem;
  background-color: #eee;
  margin-top: 0.2rem;
}
.devide {
  height: 0.1rem;
  width: 100%;
  background-color: #f5f5f5;
}

.goods {
  width: 100%;
}
</style>